<template>
	<view class="page">
		<block v-if="info">
			<!-- <view class="mar-b-10" v-if="info.video_url">
				<video id="myVideo" :src="info.video_url"
					@error="videoErrorCallback" enable-danmu danmu-btn controls></video>
					<clear-line :height="8" :bacColor="'#F4F5FA'"></clear-line>
			</view> -->
			<audio style="opacity: 0;height: 0px !important;position: absolute;left: 0;top: 0;" ref="audio" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
			
			<view class="container box-b pad-b-20">
				<view class="title mar-t-10">
					<view class="tq-text-line2">
						<text class="font-size-20 font-bold">{{info.title||''}}</text>
					</view>
					<view class="flex align-center justify-between font-color-999" style="padding: 16rpx 0;">
						<view class="flex align-center">
							<text class="font-size-13">{{info.create_time_text||''}}</text>
							<view class="flex align-center font-size-13">
								<text class="mar-l-10">{{Number(info.real_views) + Number(info.v_views)}}阅读</text>
								<text class="mar-l-10">{{Number(info.hit_num) + Number(info.v_views)}}访问</text>
							</view>
						</view>
						<!-- <view class="flex align-center justify-end" @click="zwshareC">
							<image class="shareIcon" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/2b217a49-0540-48f3-b5b5-c79ef8aa16ce.png" mode=""></image>
							<text class="font-size-13 mar-l-3">分享</text>
						</view> -->
					</view>
				</view>
				<view class="mar-t-10 flex align-center justify-between w-100 box-b mar-b-10" style="background-color: #86c6fe;padding: 20rpx;border-radius: 10rpx;" v-if="info.video_url">
					<!-- <audio style="text-align: left;display: block !important;" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio> -->
					<view class="flex align-center flex-1">
						<image style="width: 100rpx;height: 100rpx;border-radius: 20rpx;overflow: hidden;" :src="info.image" mode=""></image>
						<text class="font-color-fff font-size-13 mar-l-6">{{current.name}}</text>
						<text class="font-color-fff font-size-13 mar-l-6" v-if="mp3duration">{{h}}:{{m}}:{{s}}</text>
					</view>
					<image style="width: 68rpx;height: 68rpx;" @click="playEvent" :src="isPlay?'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/871b5846-411b-4d4f-9b65-8b46ac10988b.png':'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/55201f58-5065-4a18-b528-01689ce30332.png'" mode=""></image>
				</view>
				<view class="font-size-16" v-if="content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
			<!-- <view class="text-center pad-b-20">
				<image src="@/static/icons/evaluate.png" class="pinjia" @click="show_pingjia=true"></image>
				<view class="font-color-A7AABB mar-t-5">评价可获得更多积分~</view>
			</view> -->
			<!-- <clearLine :height="15" bacColor="#F4F5FA"></clearLine> -->
			<!-- <comment-list :list="list" @reply="reply" :current_comment_index.sync="current_comment_index" class="pad-b-40"></comment-list> -->
		</block>
		
		 <view class="mask " v-show="show_pingjia" @click="comment">
			<view class="do-comment pos-fixed" @click.stop>
				<view class="container pad-t-20"> 
				
					<view class="flex align-center">
						<view class="cancel">
							<i class="weui-icon-cancel font-color-ccc"></i>
						</view>
						<view class="text-center flex-1 font-bold font-size-16">
							填写评论
						</view>
						<view id="save_add" class="font-size-14" :class="{active:remark}" @click="pinjia">
							提交
						</view>
					</view>
					<view class="  text-middle align-center flex text-left mar-t-10" v-if="pid=='' || pid ==0">
						<view class="font-size-13 font-bold font-color-666">打分 :</view>
						<view class="flex-1 pj-rate mar-l-10" >
							<htz-rate v-model="score_info.zhpf"></htz-rate>
						</view>
					</view>
					<view class="comment-content mar-t-10">
						<textarea name="" id="comment-info" :placeholder="placeholder" v-model="remark"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getEduDetail,commentsCreate,commentsList,serverTimeStamp,eduRead} from '@/utils/http'
import htzRate from '@/components/htz-rate'
import commentList from '@/components/comments-list'
export default {
	data() {
		return {
			info: '',
			type:'edu_resource',
			content: '',
			score_info: { zhpf: 0,  },
			show_pingjia:false,
			remark:'',
			id:0,
			index_page: 0,
			total_page: 1,
			list: [],
			pid:0,
            reply_id:'',//回复关联id
            current_comment_index:'',
			placeholder:'写下你精彩的评论吧',
			timestamp:'',
			timing:'',
			current: {
				poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
				name: '',
				author: '',
				src: '',
			},
			audioAction: {
				method: 'pause'
			},
			mp3:'',
			isPlay:false,
			mp3duration:'',
			h:'',
			m:'',
			s:'',
			leftTime:'',
			countTimer:''
		}
	},
	components: {
		htzRate,commentList
	},

	methods: {
		countTime() {
			//时间差
			// const 
			this.leftTime = this.leftTime - 1000
			//定义变量 d,h,m,s保存倒计时的时间
			if (this.leftTime >= 0) {
				// d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
				this.h = Math.floor(this.leftTime / 1000 / 60 / 60 % 24);
				this.m = Math.floor(this.leftTime / 1000 / 60 % 60);
				this.s = Math.floor(this.leftTime / 1000 % 60);
			}
			//递归每秒调用countTime方法，显示动态时间效果
			this.countTimer = setTimeout(this.countTime, 1000);
		},
		playEvent() {
			if(this.isPlay){
				this.mp3.pause(); //暂停
				uni.setStorageSync('leftTime',this.leftTime)
				clearTimeout(this.countTimer)
			}else{
				this.mp3.play(); //播放
				this.leftTime = uni.getStorageSync('leftTime')
				this.countTime()
			}
			// console.log('duration',this.$refs.audio.duration)
			// console.log('this.mp3.duration',this.mp3.duration)
			this.isPlay = !this.isPlay;
		},
		detail() {
			const _that = this
			getEduDetail({ id:this.id }).then((res) => {
				if (res) {
					_that.info = res
					this.content = this.formatRichText(res.content)
					this.current.name = _that.info.title.substr(0,16)+'...'
					this.current.src = _that.info.video_url
					this.mp3 = new Audio(_that.info.video_url);
					// var url = URL.createObjectURL(_that.info.video_url);
					//audio也可获取视频的时长
					this.mp3.addEventListener("loadedmetadata",(_event)=>{
						console.log('this.mp3.duration',this.mp3.duration)
						this.mp3duration = this.mp3.duration
						this.leftTime = this.mp3duration*1000;
						uni.setStorageSync('leftTime',this.leftTime)
						this.h = Math.floor(this.leftTime / 1000 / 60 / 60 % 24);
						this.m = Math.floor(this.leftTime / 1000 / 60 % 60);
						this.s = Math.floor(this.leftTime / 1000 % 60);
						// this.mp3duration = (this.mp3.duration/60).toFixed(0)
						console.log('this.mp3duration',this.mp3duration)
					})
				}
			})
		},
		pinjia(){
			if(!this.remark){
				this.errorToShow('请填写评价内容');
				return;
			}
			const _that = this
			if(this.pid >0){
				//回复
				console.log('回复');
				commentsCreate({id:this.reply_id,type:'comments',content:this.remark,pid:this.pid}).then(res=>{
					if(res){
						let  child_comment = this.list[this.current_comment_index].child.data;
						if( typeof child_comment == 'object'){
							this.list[this.current_comment_index].child.total ++;
							this.list[this.current_comment_index].child.data.unshift(res);
						}
						//this.list[this.current_comment_index].child.unshift(res);
					}
					this.init()
				})
			}else{
				commentsCreate({
					type: this.type,
					id: this.id,
					score_info: JSON.stringify(this.score_info),
					content: this.remark
				}).then(res => {
					if(res){
						res.child = {
							current_page:1,
							data:[],
							last_page:0,
							per_page:1,
							total:1
						};
						this.list.unshift(res)
					}
					//this.successToShow('评价成功');
                    this.init()
				})
			}
			
		},
		init(){
			this.show_pingjia = false
            this.pid = 0 
            this.current_comment_index = '';
            this.pid = 0;
            this.remark = '';
            this.placeholder = '写下你精彩的评论吧'
        },
        comment(){
            this.init();
        },
		//回复
		reply(cindex){
			this.show_pingjia = true
            let current_comments = this.list[this.current_comment_index];
            // this.current_comment_index = index;
            this.remark = '';
            this.pid = current_comments.id //设置上级为一级评论的id
            if(typeof cindex != 'undefined'){
                let child_comment = current_comments.child.data[cindex];
                this.reply_id = child_comment.id
                this.placeholder = '回复:'+ child_comment.user.nickname
            }else{
                this.reply_id = current_comments.id 
                this.placeholder = '回复:'+current_comments.user.nickname;
            }
           
        },
		getPinjiaList(){
			commentsList({type:this.type,related_id:this.id,timestamp:this.timestamp}).then(res=>{
				if(res){
					this.index_page = res.current_page
					this.total_page = res.last_page
					this.list = [...this.list, ...res.data]
				}
					
			})
		},
		serverTimeStamp(){
			serverTimeStamp().then(res=>{
				this.timestamp = res;
			})
		},
		//阅读完成
		eduRead(){
			eduRead({id:this.id}).then(res=>{
				if(res){
					this.successToShow(res.msg);
				}
			})
		},
		zwshareC(){
			let url = 'https://cnxfljj.cncn.gov.cn/#/pages/edu/detailShare?id=' + location.href.split('#')[1].split('=')[1]
			console.log('zwshareC',url)
			const params = {
			    title:this.info.title,
			    image:this.info.image,
			    url
			}
			ZWJSBridge.share(params).then((result) => {
			    console.log(result);
			}).catch((error) => {
			    console.log(error);
			});
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.index_page = 0
		this.total_page = 1
		this.list = []
		this.detail()
		// this.getPinjiaList(this.info.title,'',this.info.image,location.href);
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			// this.getPinjiaList();
		}
	},


	onLoad(option) {
		this.id = option.id
		// console.log(new Date().getTime());
		
		// this.timestamp  =parseInt(( new Date().getTime())/1000) ;
		// console.log(this.timestamp);
		this.detail()
		// this.getPinjiaList();
		// this.serverTimeStamp();
		// this.zwshare();
		
	},
	onReady(){
		// let _that = this;
		// this.timing = setTimeout(() => {
		// 	_that.eduRead()
		// },180000);
	},
	onUnload(){
		// if(this.timing){
		// 	clearTimeout(this.timing)
		// }
		if(this.countTimer){
			clearTimeout(this.countTimer)
		}
	}
}
</script>

<style scoped>
#myVideo{
	width:100%;
}
.pinjia{
	margin: 0 auto;
	height: 100rpx;
	width: 100rpx;
	border-radius: 50%;
	text-align: center;
}

.do-comment{
	z-index: 999;
	bottom: 0px;
	width: 100%;
	background-color: #fff;
	min-height: 11.11em;
}
.comment-content{
	overflow: hidden;
}
.comment-content textarea{
	width: 100%;
	font-size: 0.83em;
}
#save_add{
	background-color: #f2f2f2;
	color: #ccc;
	padding: 10rpx 20rpx !important;
	display: inline-block;
	border-radius: 3px;
}
#save_add.active{
	background: #0088ff !important;
	color: #fff;
}

</style>